import './index.css'
import Item from '../Item'
import { useContext } from 'react';
import context from '../../context';
/* 
列表组件
*/
export default function List() {
  // 利用useContext得到context对象内部的数据
  const data = useContext(context)

  return (
    <ul className="todo-main">
      {/* 遍历todos, 显示多个列表项 */}
      {
        data.todos.map(todo => <Item key={todo.id} todo={todo}/>)
      }
    </ul>
  );
}
